<template>


    <el-card>
      <!-- 数据表格 -->
      <el-table :data="stations" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"/>
        <el-table-column type="index" label="序号" width="60" :index="(index) => (page - 1) * size + index + 1"/>
        <el-table-column prop="stationName" label="站点名称" width="200"/>
        <el-table-column prop="stationType" label="站点类型" width="130"/>
        <el-table-column prop="stationProperty" label="站点属性" width="130"/>
        <el-table-column prop="address" label="详细地址"/>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          :total="total"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="fetchData"
          @size-change="fetchData"
      />
      <div style="text-align: right; margin-top: 10px;">
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </div>
    </el-card>

</template>

<script setup>
import { reactive, ref, onMounted, toRaw, defineProps, watch, defineEmits } from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";

const emit = defineEmits();
const props = defineProps({
  dialogS: Boolean  // 是否可见
});
watch(() => props.dialogS, (newVal) => {
  dialogVisibleInner.value = newVal
});
const dialogVisibleInner = ref(false);
const stations = ref([]);
const selectedStations = ref([]);
const page = ref(1);
const size = ref(5);
const total = ref(0);
const fetchData = () => {
  const params = {};
  params.page = page.value;
  params.size = size.value;
  axios
      .get('/station/getStationByPage', {params})
      .then((response) => {
        const result = response.data;
        stations.value = result.records || [];
        total.value = result.total || 0;
      })
      .catch(() => {
        ElMessage.error('数据加载失败');
        stations.value = [];
      })
};
const handleSelectionChange = (selection) => {
  selectedStations.value = selection;
};
const confirmSelection=(()=>{
  emit('StiationClose', false);
  emit('confirmSelection', selectedStations.value);
  selectedStations.value=null
})
onMounted(() => {
  fetchData()
});
</script>

<style scoped>
</style>
